<script lang="ts" setup>
  import { watch, ref } from 'vue';
  import { useRouter } from 'vue-router';
  import { Menu, MenuItem, SubMenu } from '@arco-design/web-vue';
  import { IconHome, IconBook } from '@arco-design/web-vue/es/icon';

  interface CreatorMenu {
    title: string;
    key?: string;
    icon?: any;
    children?: CreatorMenu[];
  }
  const menus: CreatorMenu[] = [
    {
      title: '极星文章榜',
      icon: IconBook,
      children: [
        { title: '文章管理', key: 'CREATOR_CONTENT_ARTICLE' },
        { title: '专栏管理', key: 'CREATOR_CONTENT_SP_COLUMN' },
        {
          title: '沸点管理',
          key: 'CREATOR_CONTENT_PINS',
        },
      ],
    },
    { title: '精选专栏榜', key: 'CREATOR_HOME', icon: IconHome },
    { title: '优质作者榜', key: 'CREATOR_HOME', icon: IconHome },
  ];

  const menuMap = new Map();
  const router = useRouter();
  const selectedKeys = ref<string[]>([]);

  travelMenus(menus);

  watch(
    router.currentRoute,
    ({ matched }) => {
      const matchedMenu = findMatchedMenu(matched);
      if (matchedMenu) {
        selectedKeys.value = [matchedMenu.key];
      }
    },
    { immediate: true },
  );
  watch(
    () => selectedKeys.value[0],
    (name) => {
      if (name !== router.currentRoute.value.name) {
        router.push({ name });
      }
    },
  );

  function travelMenus(menus) {
    menus.forEach((item) => {
      if (!item.children) {
        menuMap.set(item.key, item);
      } else {
        travelMenus(item.children);
      }
    });
  }

  function findMatchedMenu(matched) {
    for (const item of matched) {
      if (menuMap.has(item.name)) {
        return menuMap.get(item.name);
      }
    }
  }
</script>
<template>
  <div class="mx-[40px]">
    <div class="mt-[30px]">
      <a-row class="ml-[10px]">
        <a-col
          :span="3"
          class="text-[28px] font-[900] bg-clip-text text-transparent bg-gradient-to-t from-[#5F70FF] to-[#B174FF]"
          >极星热榜</a-col
        >
        <a-col :span="18">1</a-col>
      </a-row>
    </div>
    <a-row class="mt-[15px]" :gutter="30">
      <a-col :span="5">
        <Menu
          class="overflow-y-auto rounded-[3px] p-[9px] h-[800px]"
          v-model:selectedKeys="selectedKeys"
          autoOpen
          :levelIndent="30"
        >
          <template v-for="item in menus" :key="item.key">
            <MenuItem v-if="!item.children" v-bind="{ key: item.key }">
              <template #icon v-if="item.icon">
                <component :is="item.icon" />
              </template>
              {{ item.title }}
            </MenuItem>
            <SubMenu v-else v-bind="{ key: item.key }">
              <template #icon v-if="item.icon">
                <component :is="item.icon" class="w-[16px] h-[16px]" />
              </template>
              <template #title v-if="item.title">
                <span class="font-[900] text-[16px]"> {{ item.title }}</span>
              </template>
              <template v-for="subItem in item.children" :key="subItem.key">
                <MenuItem
                  v-if="!subItem.children"
                  v-bind="{ key: subItem.key, title: subItem.title }"
                >
                  <template #icon v-if="subItem.icon">
                    <component :is="subItem.icon" />
                  </template>
                  {{ subItem.title }}
                </MenuItem>
              </template>
            </SubMenu>
          </template>
        </Menu>
      </a-col>
      <a-col :span="19">
        <a-card :bordered="false" />
      </a-col>
    </a-row>
  </div>
</template>
